<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>websocket测试</title>
</head>
<body>
    <input type="text" id="message">
    <button id="sendBtn">发送</button>

    <script>
        // 创建一个 websocket 实例
        // ws 是 websocket 的缩写，然后后面就是我们的服务器的ip地址以及前面服务端配置的路由地址
        let websocket = new WebSocket("ws://127.0.0.1:8080/test");

        // 为 websocket 注册一些回调函数
        websocket.onopen = function() {
            // websocket 连接建立完成之后，自动执行到
            console.log('websocket 连接成功');
        }

        websocket.onclose = function() {
            // websocket 连接断开后，自动执行到
            console.log('websocket 连接断开');
        }

        websocket.onerror = function() {
            // websocket 连接异常时，自动执行到
            console.log('websocket 连接异常');
        }

        websocket.onmessage = function(e) {
            // 收到对端消息时，自动执行到
            e = JSON.parse(e)
            console.log('websocket 收到消息' + e.data);
        }

        let sendBtn = document.querySelector('#sendBtn');
        sendBtn.onclick = function() {
            let input = document.querySelector('#message');
            websocket.send(input.value)

            let req = {
                type: 'message',
                data: input.value
            }
            websocket.send(JSON.stringify(req));
        }
    </script>
</body>
</html>